/*
 * @Description: 表单属性配置
 * @Autor: gufuyan
 * @Date: 2021-11-12 15:25:17
 * @lastModifiedBy: gufuyan
 * @LastEditTime: 2021-12-03 16:37:31
 * @lastModifiedContent:
 */
import React, { useState } from 'react';
import { Input, Button, Tooltip, Select, Switch } from 'antd';
import { QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
import { FormattedMessage, useModel } from 'umi';
import ExplicitImplicitRule from '../ShowFieldRule';
import ValidationRule from '../ValidationRule';
import AssignmentRules from '../AssignmentRules';
import MoreLabel from '../MoreLabel';
import FrontEndEvent from '../FrontEndEvent';
import { tip, setValueOptions, layoutOptions } from './constants';
import styles from './index.less';

const { Option } = Select;

export const intl = (id: string) => <FormattedMessage id={id} />;

/**
 * 小问号提示
 * @param props
 * @returns JSX
 */
const Tip = (props: { desc: string; type: string }) => {
  return (
    <Tooltip
      title={() => (
        <>
          {intl(props.desc)}
          <a>{intl('drag.learn.more')}</a>
        </>
      )}
    >
      <QuestionCircleOutlined className={styles.tip} />
    </Tooltip>
  );
};

/**
 * 不可见字段赋值规则：下拉
 * @returns JSX
 */
const SelectOption = (props: { data: string[] }) => {
  return (
    <Select defaultValue="four" style={{ width: 240 }} onChange={() => {}}>
      {props.data.map((item) => (
        <Option key={item} value={item}>
          {intl(`drag.layout.${item}`)}
        </Option>
      ))}
    </Select>
  );
};

interface IFormAttributesProps {
  layoutData: any;
}
const FormAttributes: React.FC<IFormAttributesProps> = (props) => {
  const drag = useModel('drag');
  const [openExplicitImplicit, setExplicitImplicit] = useState(false);
  const [openValidation, setValidation] = useState(false);
  const [openAssignment, setOpenAssignment] = useState(false);
  const [openFormEvent, setOpenFormEvent] = useState(false);
  const [moreLabelVisible, setMoreLabelVisible] = useState(false);

  return (
    <div className={styles.formAttributes}>
      {/* 表单 ID */}
      <div className={styles.title}>{intl('drag.formid')}</div>
      <Input disabled addonAfter={intl('drag.copy')} defaultValue="aaassdfqweqweqw0001" />
      {/* 字段显隐规则 */}
      <div className={styles.title}>
        {intl('drag.explicit.implicit')}
        <Tip {...tip.show} />
      </div>
      <Button
        type="primary"
        onClick={() => {
          // const res = [{"title":"文本组件","id":"input-552a371a21ee4b46b204d9eb9783522b","name":"input","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"textarea":false,"tip":"","format":"","defaultValType":"customize"}},{"title":"单选按钮组","id":"radio-b9caf20bbac94bc6b0d49af6a5f8ad5c","name":"radio","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"options":[{"label":"选项1","value":"值1","id":"230d62a50fc94cd186b2ab6be8dd8ee5"},{"label":"选项2","value":"值2","id":"87c90fc931454ff1976aef5d2807ca14"},{"label":"选项3","value":"值3","id":"b13f32186e4448a28ed909b899042bd7"}],"vertical":true}},{"title":"子表单","id":"subForm-e63455ced3574f2faee4c800fe7056b5","name":"subForm","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","children":[[{"title":"下拉选择器","id":"select-dc37b5ec1427433db59a18a03bdfc4ce","name":"select","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"tip":"","options":[{"label":"选项1","value":"值1","id":"28c5ca7b4cbc4405a7aee03f38eca2f4"},{"label":"选项2","value":"值2","id":"10e98c4c60de4d93aa19c72a797f099a"},{"label":"选项3","value":"值3","id":"41ab027ce78f4e14af5641209c5d4050"}],"multiple":false}},{"title":"下拉选择器","id":"select-7fac5385dc50432f922ec4c3a1f1e74d","name":"select","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"tip":"","options":[{"label":"选项1","value":"值1","id":"9f2b2297601b4e709776d9f2c045d645"},{"label":"选项2","value":"值2","id":"af9d8c1c8dc0443fbf3623c6452efeb4"},{"label":"选项3","value":"值3","id":"cfd4c60ac51140a690fd634760b98a6e"}],"multiple":false}},{"title":"下拉选择器","id":"select-20719068a3b049dc978b42007dd27b0e","name":"select","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"tip":"","options":[{"label":"选项1","value":"值1","id":"927170a9ddd1423695493027348b4bd7"},{"label":"选项2","value":"值2","id":"1523d49924994a0c84448ec89f08f281"},{"label":"选项3","value":"值3","id":"36740f2fa8994f5d88349070d03cf40c"}],"multiple":false}},{"title":"日期选择器","id":"datePicker-67dab4a7c8f14a258252a5862cebe964","name":"datePicker","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"allowClear":"","picker":"default","showTime":false,"showToday":true,"swDefaultValue":false,"defaultValue":""}},{"title":"文本组件","id":"input-77bc04f7a8844ad8b343bb91e5ef7013","name":"input","showTitle":true,"inline":false,"check":{"required":false},"span":1,"fieldPermissions":{"show":true,"edit":true},"field":"","value":"","describe":"","props":{"textarea":false,"tip":"","format":"","defaultValType":"customize"}}]],"stickyColumn":{"enable":false,"limit":0}}];
          // drag.fn.setContentItem(res);
          drag.fn.setContentItem(props.layoutData);
          setExplicitImplicit(true);
        }}
      >
        {intl('drag.explicit.implicit.btn')}
      </Button>
      {/* 表单提交校验 */}
      <div className={styles.title}>
        {intl('drag.submit.verify')}
        <Tip {...tip.verify} />
      </div>
      <Button
        type="primary"
        onClick={() => {
          drag.fn.setContentItem(props.layoutData);
          setValidation(true);
        }}
      >
        {intl('drag.submit.verify.btn')}
      </Button>
      {/* 前端事件 */}
      <div className={styles.title}>
        {intl('drag.event')}
        <Tip {...tip.show} />
      </div>
      <Button
        type="primary"
        onClick={() => {
          drag.fn.setContentItem(props.layoutData);
          setOpenFormEvent(true);
        }}
      >
        {intl('drag.event.btn')}
      </Button>
      {/* 不可见字段赋值规则 */}
      <div className={styles.title}>
        {intl('drag.hide.setValue')}
        <Tip {...tip.setValue} />
      </div>
      <div className={styles.disabledBox}>
        <SelectOption data={setValueOptions} />
        <SettingOutlined className={styles.icon} onClick={() => setOpenAssignment(true)} />
      </div>
      <AssignmentRules
        visible={openAssignment}
        handleOk={(data) => {
          console.log(data);
        }}
        handleCancel={() => {
          setOpenAssignment(false);
        }}
      />
      {/* 表单前台缓存 */}
      <div className={styles.title}>
        {intl('drag.page.cache')}
        <Tip {...tip.cache} />
        <Switch
          className={styles.switch}
          checked={drag.config.hasCache}
          onChange={() => drag.fn.setCache()}
        />
      </div>
      {/* 多标签显示 */}
      <div className={styles.title}>
        {intl('drag.tab')}
        <Switch
          className={styles.switch}
          onChange={(e) => {
            setMoreLabelVisible(e);
          }}
        />
      </div>
      {moreLabelVisible && (
        <MoreLabel
          onChange={(data) => {
            console.log(data);
          }}
        />
      )}
      {/* 表单布局 */}
      <div className={styles.title}>{intl('drag.layout')}</div>
      <div className={styles.disabledBox}>
        <SelectOption data={layoutOptions} />
        <SettingOutlined className={styles.icon} />
      </div>
      {/* 前端事件 */}
      {openFormEvent && (
        <FrontEndEvent visible={openFormEvent} handleClose={() => setOpenFormEvent(false)} />
      )}
      {/* 表单外链样式 */}
      {/* 提交按钮 */}
      {openExplicitImplicit && (
        <ExplicitImplicitRule
          visible={openExplicitImplicit}
          handleClose={() => setExplicitImplicit(false)}
        />
      )}
      {openValidation && (
        <ValidationRule
          type="form"
          visible={openValidation}
          handleClose={() => setValidation(false)}
        />
      )}
    </div>
  );
};

export default FormAttributes;
